<template>
	<view class="collect-container">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px'}">
				<view class="navigater flex align-center justify-between">
					<scroll-view :scroll-left="scrollLeft" scroll-x class="nav text-center">
						<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub"
							:class="currentItemId === item.type ? 'text-green cur' : ''"
							@tap="handleSelect(item.type, index)">
							<text class="text-30">{{item.type_text}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true }" @load="load($event,'load')" @refresh="load($event,'refresh')">
		<view class="collect-container__main">
			<view class="content">
				<view v-for="(item, footprint) in formatData(dataList)" :key="footprint">
					<view class="wanl-gray text-30 margin-sm">
						{{ item.createtime }}
					</view>
					<view class="box">
						<view class="item" v-for="(goods, index) in item.data" :key="index" @tap="handleGoods(goods.source.id,goods.title)">
							<image :src="$wanlshop.oss(goods.source.image, 136, 126)" mode="aspectFill"></image>
							<view class="right margin-left-sm">
								<view class="wanl-gray-dark text-cut-2">{{goods.source && goods.source.title}}</view>
								<view class="">
									<view class="flex align-center justify-between">
										<view v-if="goods.type == 6 || goods.type == 9 || goods.type == 12"></view>
										<view v-else class="text-price text-red">{{goods.source.price}}</view>
									</view>
									<view class="button text-sm wanl-gray-light flex align-center justify-between">
										<text class="wanl-gray text-sm">{{goods.createtime_text}}</text>
										<text class="icon-shanchu1 iconfont" @click.stop="loadFollow(goods.id)"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				scrollLeft: 0,
				headHeight: 0,
				windowHeight: 0,
				headTop: 0,
				currentId: 0,
				currentItemId: '1',
				navList: [
					{index:0,type: '1',type_text: '家政服务'},
					{index:1,type: '2',type_text: '医护上门'},
					{index:2,type: '3',type_text: '陪诊陪护'},
					{index:3,type: '6',type_text: '圈子'},
					{index:4,type: '7',type_text: '商品'},
					{index:5,type: '8',type_text: '团购'},
					{index:6,type: '9',type_text: '文章'},
					{index:7,type: '11',type_text: '医生'},
					{index:8,type: '12',type_text: '医院'}
				]
			};
		},
		async onLoad() {
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = uni.upx2px(90);
			this.windowHeight = sys.windowHeight - uni.upx2px(90);
		},
		onNavigationBarButtonTap(e) {
			uni.showModal({
				content: '确定要清空所有足迹？',
				success: res => {
					if (res.confirm) {
						uni.request({
							url: '/member/browse/clear',
							method: 'POST',
							success: del => {
								this.$wanlshop.msg('足迹清空成功')
								this.$refs.list.refreshScrollView()
								this.load({page:1},'refresh')
							}
						});
					}
				}
			});
		},
		methods: {
			// 删除
			loadFollow(id) {
				uni.request({
					url: '/member/browse/del',
					method:"POST",
					data: {
						ids: id
					},
					success: res => {
						this.$wanlshop.msg('删除成功');
						this.$refs.list.refreshScrollView()
						this.load({page:1},'refresh')
					}
				});
			},
			load(paging,key) {
				let index = this.currentId;
				let navItem = this.navList[index];
				uni.request({
					url: '/member/collect/browse',
					data: {
						type: navItem.type,
						page: paging.page
					},
					success: res => {
						let dataList = res.data.data
						if(key == 'load') {
							this.dataList = [...this.dataList, ...dataList];
							this.$refs.list.loadSuccess({ list: this.dataList, total: res.data.total });
						} else if(key == 'refresh') {
							this.dataList = dataList;
							this.$refs.list.refreshSuccess({ list: this.dataList, total: res.data.total });
						}
					}
				});
			},
			// 选择Tag
			handleSelect(id, index) {
				this.currentItemId = id;
				this.currentId = index;
				this.scrollLeft = index * uni.upx2px(160)
				
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			},
			handleGoods(id,title){
				console.log(id,title)
				let type = this.currentItemId;
				switch (Number(type)){
					case 1:
						this.$wanlshop.to(`/pages/medicalcare/homemaking/product?id=${id}`)
						break;
					case 2:
						this.$wanlshop.to(`/pages/medicalcare/visit/product?id=${id}`)
						break;
					case 3:
						this.$wanlshop.to(`/pages/medicalcare/accompany/product?id=${id}`)
						break;
					case 6:
						this.$wanlshop.to(`/pages/circle/details?id=${id}`)
						break;
					case 7:
						this.$wanlshop.to(`/pages/product/goods?id=${id}`)
						break;
					case 8:
						this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}`)
						break;
					case 9:
						this.$wanlshop.to(`/pages/article/details?id=${id}&title=${title}&type=article`)
						break;
					case 11:
						this.$wanlshop.to(`/pages/medicalcare/bookingsystem/doctor?id=${id}`)
						break;
					case 12:
						this.$wanlshop.to(`/pages/medicalcare/bookingsystem/hospital?id=${id}`)
						break;
					default:
						break;
				}
				
			},
			formatData(data) {
				let newArr= {}
				let list =[];
				data.map(res => {
					res.show = false
					newArr[this.$moment(res.createtime * 1000).format('YYYY-MM-DD')] = newArr[this.$moment(res.createtime * 1000).format('YYYY-MM-DD')] || [];
					newArr[this.$moment(res.createtime * 1000).format('YYYY-MM-DD')].push(res);
				})
				 Object.keys(newArr).forEach(v => {
					let obj = {};
					obj.createtime = v;
					obj.data = newArr[v]
					list.push(obj);
				})
				return list;
			},
			getLocalTime(nS) {
				return this.$moment(nS * 1000).format('YYYY-MM-DD')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.collect-container {
		&__head {
			.navigater {
				position: relative;

				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9999;

					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}

		&__main {
			position: relative;
			z-index: 99;
			.content{
				height: 100%;
				.box {
					padding: 0 20rpx;
					.item {
						display: flex;
						justify-content: space-between;
						width: 100%;
						padding: 20rpx;
						background-color: #ffffff;
						box-shadow: 0px 2px 11px rgba(0,0,0,.1) !important;
						margin-bottom: 20rpx;
						border-radius: 10rpx;
						overflow: hidden;
						image{
							height: 200rpx;
							width: 200rpx;
							border-radius: 10rpx;
						}
						.right {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							width: calc(100% - 220rpx);
						}
					}
				}
			}
		}
	}
	.nav .cu-item {
		width: 160rpx !important;
	}
	
	.nav .cu-item.cur {
		border: none;
		position: relative;
	
		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 34rpx;
			height: 4rpx;
			background: #4CBD66;
			bottom: 0;
			left: 50%;
			margin-left: -17rpx;
		}
	}
</style>